import React from "react";
import { Layout, Menu, Icon } from "antd";
import { MenuUnfoldOutlined, MenuFoldOutlined } from "@ant-design/icons";
import Logo from "./logo";
import "./index.css";
import { Link } from "react-router-dom";
import Right from "./Right/Right";

const { Header, Sider, Content } = Layout;

export default class Home extends React.Component {
    state = {
        collapsed: false,
    };

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    };

    render() {
        return (
            <Layout>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                    style={{ zIndex: "10" }}
                >
                    {/* Logo标志 */}
                    <Logo />
                    {/* 左边单子 */}
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={["1"]}>
                        <Menu.Item key="1">
                            <Link exact to="/">
                                <Icon type="home" />
                                <span>首页</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="2">
                            <Link to="/advice">
                                <Icon type="mail" />
                                <span>意见反馈</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="3">
                            <Link to="/activity">
                                <Icon type="calendar" />
                                <span>商品列表</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="4">
                            <Link to="/user">
                                <Icon type="usergroup-add" />
                                <span>用户管理</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="5">
                            <Link to="/about">
                                <Icon type="info" />
                                <span>关于项目</span>
                            </Link>
                        </Menu.Item>
                        <Menu.Item key="6">
                            <Link to="/aboutbackmanage" >
                                <Icon type="info-circle" />
                                <span>关于后台管理系统</span>
                            </Link>
                        </Menu.Item>
                        {/* <Menu.Item key="1" icon={<HomeOutlined />}>
                            首页
                        </Menu.Item>
                        <Menu.Item key="2" icon={<TableOutlined />}>
                            意见反馈
                        </Menu.Item>
                        <Menu.Item key="3" icon={<FileZipOutlined />}>
                            活动列表
                        </Menu.Item>
                        <Menu.Item key="4" icon={<UsergroupAddOutlined />}>
                            用户管理
                        </Menu.Item>
                        <Menu.Item key="5" icon={<UserOutlined />}>
                            关于项目
                        </Menu.Item> */}
                    </Menu>
                </Sider>

                <Layout className="site-layout">
                    {/* header 内容 */}
                    <Header
                        className="site-layout-background"
                        style={{ padding: 0, backgroundColor: "white" }}
                    >
                        {React.createElement(
                            this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
                            {
                                className: "trigger",
                                onClick: this.toggle,
                                style: {
                                    marginLeft: "15px",
                                    height: "25px",
                                    width: "25px",
                                },
                            }
                        )}
                    </Header>
                    {/* Content */}
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: "24px 16px",
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Right />
                    </Content>
                </Layout>
            </Layout>
        );
    }
}

// export default Home;
